<template>
    <div class="main-layout">
      <Sidebar />
  
      <div class="main-content">
        <div class="header">
          <h2>历史记录</h2>
        </div>
  
        <div class="content">
          <el-card>
            <template #header>
              <div class="section-header">
                <el-icon><List /></el-icon>
                <span>数字人生成记录</span>
              </div>
            </template>
  
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="id" label="编号" width="80" align="center" />
              <el-table-column prop="link" label="链接" />
              <el-table-column prop="duration" label="时长" width="120" align="center" />
              <el-table-column prop="size" label="大小" width="120" align="center" />
              <el-table-column prop="time" label="生成时间" width="180" align="center" />
            </el-table>
  
            <div v-if="tableData.length === 0" class="empty-table">
              <el-empty description="暂无记录" />
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import Sidebar from '@/components/Sidebar.vue'
  import { ref } from 'vue'
  import { List } from '@element-plus/icons-vue'
  
  const tableData = ref([]) // 空表格数据
  </script>
  
  <style scoped>
  .main-layout {
    display: flex;
    height: 100vh;
  }
  
  .main-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: #f5f6fa;
  }
  
  .header {
    margin-bottom: 20px;
  }
  
  .section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
  }
  
  .empty-table {
    padding: 40px 0;
  }
  </style>
  